import {useSettingStore} from "@/stores";
import {requireImg} from "@utils/common/Image";

/**
 * Wallpaper 组件
 * @date 2023/9/26
 */
export default defineComponent({
  name: "WallpaperLayout",
  setup() {
    const { wallpaperImage, bgBlur } = storeToRefs(useSettingStore());

    const imageUrl = computed(() => {
      if (!wallpaperImage.value.startsWith("http")) {
        return requireImg(wallpaperImage.value);
      }
      return wallpaperImage;
    });
    return () => (
      <main
        id="wallpaper"
        class="fixed object-cover z-0 inset-0 bg-cover bg-no-repeat"
        style={{ filter: `blur(${bgBlur}px)`, backgroundImage: `url('${imageUrl.value}')` }}
      ></main>
    );
  },
});
